Draft
This page is not complete.
<input>
elements of type "tel"
let the user enter or edit a phone number which is represented in elements value.
<input id="phoneNumber" type="tel">
Value | A DOMString representing the phone number |
Events | change and input |
Supported Common Attributes | required , autocomplete , pattern |
IDL attributes | value |
Methods | select() , setRangeText() , setSelectionRange() |
Value
The <input>
element's value
attribute's value contains a DOMString
which can be in any format. There are two possible value formats that will pass validation:
- An empty string ("") indicating that the user did not enter a value or that the value was removed.
- Text without linebreaks. These are characters like "LF" LINE FEED (U+000A) or "CR" CARRIAGE RETURN (U+000D).
No syntax validation is done like with email
or url
type inputs. Validation can be added via pattern
attribute or setCustomValidity()
method.
Validation
There is no validation provided because of the varying formats. So, it is possible to add any text as long as there are no new line characters in there. It is up to yourself to format which would will make sense for your use.
Pattern Validation
By adding pattern
with a valid regexp
you can enforce desired format. While it will provide you with desired results most of the time, you still need to do validation on your back-end. Not all of the requests will come directly from form submission and forms still can be tampered with.
[insert example here]
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<input type="tel">' in that specification. |
Living Standard | Initial definition |
HTML 5.1 The definition of '<input type="tel">' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | ? | ? | Unknown (4.0) | ? | ? | ? |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | iOS WebKit (Safari/Chrome/Firefox/etc) |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? | ? |